<template>
  <div class="find">
    <!-- banner -->
    <div class="swiper-container swiper-container-son" v-if="banner_data.code == 200">
      <!-- 如果需要分页器 -->
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item,index) in banner_data.banners"
          :key="index"
          @click.stop="silde_click(item.url,item.song)"
        >
          <img class="banner_img" v-lazy="item.pic" alt />
          <i class="label" :style="{background:item.titleColor}">{{item.typeTitle}}</i>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-son"></div>
    </div>
    <!-- banner -->
    <!-- 分类 -->
    <div class="classify">
      <div @click="recommend()">
        <div>
          <img src="../images/find_classify_tuijian.png" alt />
          <i>{{new Date().getDate() < 10 ? "0"+new Date().getDate():new Date().getDate()}}</i>
        </div>
        <p>每日推荐</p>
      </div>
      <div>
        <router-link :to="{name:'Playlist'}">
          <div>
            <img src="../images/find_classify_gedan.png" alt />
          </div>
          <p>歌单</p>
        </router-link>
      </div>
      <div>
        <router-link :to="{name:'Rank'}">
          <div>
            <img src="../images/find_classify_rank.png" alt />
          </div>
          <p>排行榜</p>
        </router-link>
      </div>
      <div>
        <div>
          <img src="../images/find_classify_diantai.png" alt />
        </div>
        <p>电台</p>
      </div>
      <div>
        <div>
          <img src="../images/find_classify_zhibo.png" alt />
        </div>
        <p>直播</p>
      </div>
    </div>
    <!-- 分类 -->
    <!-- 推荐歌单 -->
    <div class="personalized" v-if="personalized_data.code == 200">
      <div class="top">
        <div class="left">推荐歌单</div>
        <div class="right">歌单广场</div>
      </div>
      <ul>
        <li v-for="(item,index) in personalized_data.result" :key="index">
          <img v-lazy="item.picUrl" alt />
          <i>
            <b></b>
            <span>{{item.playCount<10000?item.playCount:Math.round(item.playCount/10000)+"万"}}</span>
          </i>
          <p class="el2">{{item.name}}</p>
        </li>
      </ul>
    </div>
    <!-- 推荐歌单 -->
    <!-- 新碟 -->
    <div class="album" v-if="album_data.code == 200">
      <div class="top">
        <div class="left">
          新碟
          <span>| 新歌</span>
        </div>
        <div class="right">歌单广场</div>
      </div>
      <ul>
        <li v-for="(item,index) in album_data.albums" :key="index">
          <img v-lazy="item.picUrl" alt />
          <p class="el2 title">{{item.name}}</p>
          <p class="name">
            <span v-for="(item1,index1) in item.artists" :key="index1">
              {{item1.name}}
              <em v-if="index1<item.artists.length-1">/</em>
            </span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 新碟 -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import Swiper from "swiper";
export default {
  data() {
    return {
      prompt_msg: "",
      prompt_flag: false
    };
  },
  computed: {
    ...mapState("find", ["banner_data", "personalized_data", "album_data"])
  },
  created() {
    this.$store.dispatch("find/getBannerData", { type: 1 });
    this.$store.dispatch("find/getPersonalizedData", { limit: 6 });
    this.$store.dispatch("find/getAlbumData", { offset: 0, limit: 3 });
  },
  mounted() {
    var that = this;
    setTimeout(() => {
      that.$nextTick(() => {
        var mySwiper_banner = new Swiper(".swiper-container-son", {
          loop: true, // 循环模式选项
          nested: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination-son",
            clickable: true
          }
        });
      });
    }, 500);
  },
  methods: {
    localStorage(list, judge) {
      if (!(list instanceof Array)) {
        list = [list];
      }
      // judge为true  播放全部 把localStorage.song_list_id全部替换掉
      // judge为false 添加播放 向localStorage.song_list_id后面添加数据
      if (judge) {
        localStorage.song_list_id = JSON.stringify(list);
      } else {
        if (localStorage.song_list_id) {
          let json_list = JSON.parse(localStorage.song_list_id);
          for (let i in list) {
            if (list.hasOwnProperty(i)) {
              let element = list[i];
              let flag = false;
              json_list.forEach(item => {
                if (item.id == element.id) {
                  flag = true;
                }
              });
              if (!flag) {
                json_list.push(element);
              }
            }
          }
          localStorage.song_list_id = JSON.stringify(json_list);
        } else {
          localStorage.song_list_id = JSON.stringify(list);
        }
      }
      let obj = JSON.parse(localStorage.song_list_id);
      let c_list = [];
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          let element = obj[key];
          c_list.push(element.id);
        }
      }
      this.$store.dispatch("song_detail/getSongsDetailData", {
        ids: c_list.join(",")
      });
    },
    object(id) {
      let object = {};
      object.name = this.$route.name;
      object.id = id;
      return object;
    },
    recommend() {
      this.$store.dispatch("login_refresh/getLoginRefreshData", {}).then(
        data => {
          this.$store.dispatch("login_status/getLoginStatusData", {}).then(
            data => {
              this.$router.push({ name: "Recommend" });
            },
            data => {
              this.$router.push({ name: "LoginSelect" });
            }
          );
        },
        data => {
          this.$router.push({ name: "LoginSelect" });
        }
      );
    },
    silde_click(url, song) {
      if (url == null && song != null) {
        this.$store
          .dispatch("song_check/getSongCheckData", { id: song.id })
          .then(value => {
            if (value) {
              let list = [];
              list.push(this.object(song.id));
              this.localStorage(list, false);
              localStorage.songIsPlayId = id;
              this.$store.dispatch("song_detail/getSongDetailData", {
                ids: song.id
              });
              this.$router.push({
                path: "/song_detail",
                query: { ids: song.id }
              });
            }
          });
      } else if (song == null && url != null) {
        top.location.href = url;
      }
    }
  }
};
</script>

<style>
.find .swiper-pagination-son .swiper-pagination-bullet-active {
  background: #ea2000;
}
.find .swiper-pagination-son {
  bottom: 3px;
}
.find .swiper-container-son .banner_img {
  position: relative;
  height: 2.6rem;
}
.find .swiper-container-son .label {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 0.22rem;
  padding: 0.05rem 0.15rem;
  font-style: normal;
  border-top-left-radius: 0.15rem;
}
</style>
<style lang="scss" scoped>
.find {
  padding-bottom: 1rem;
  overflow: initial;
  .album {
    .top {
      overflow: hidden;
      line-height: 1rem;
      padding: 0 0.4rem;
      .left {
        float: left;
        font-size: 0.38rem;
        font-weight: 900;
      }
      .right {
        float: right;
        font-size: 0.26rem;
        border: 1px solid #eee;
        padding: 0 0.2rem;
        line-height: 0.5rem;
        border-radius: 10rem;
        padding-top: 0.04rem;
        margin-top: 0.2rem;
        vertical-align: middle;
      }
    }
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 0.4rem;
      li {
        width: 2.1rem;
        position: relative;
        padding-bottom: 0.3rem;
        img {
          border-radius: 0.1rem;
        }
        p {
          text-indent: 0.5em;
          font-size: 0.24rem;
          line-height: 0.4rem;
          text-align: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p.title {
          font-size: 0.28rem;
          font-weight: 900;
        }
        p.name {
          font-size: 0.22rem;
        }
      }
    }
  }
  .personalized {
    .top {
      overflow: hidden;
      line-height: 1rem;
      padding: 0 0.4rem;
      .left {
        float: left;
        font-size: 0.38rem;
        font-weight: 900;
      }
      .right {
        float: right;
        font-size: 0.26rem;
        border: 1px solid #eee;
        padding: 0 0.2rem;
        line-height: 0.5rem;
        border-radius: 10rem;
        padding-top: 0.04rem;
        margin-top: 0.2rem;
        vertical-align: middle;
      }
    }
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 0.4rem;
      li {
        width: 2.1rem;
        position: relative;
        padding-bottom: 0.3rem;
        img {
          border-radius: 0.1rem;
        }
        > i {
          position: absolute;
          top: 0;
          right: 0.1rem;
          color: #fff;
          font-size: 0.22rem;
          > b {
            background: url(../images/play_w.png) no-repeat;
            background-size: 100% 100%;
            width: 0.26rem;
            height: 0.26rem;
            display: inline-block;
            vertical-align: text-top;
          }
          > span {
            vertical-align: text-top;
          }
        }
        p {
          text-indent: 0.5em;
          font-size: 0.24rem;
          line-height: 0.4rem;
          text-align: left;
        }
      }
    }
  }
  .swiper-container-son {
    width: 90%;
    margin: auto;
    margin-top: 0.2rem;
    border-radius: 0.15rem;
  }
  .classify {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    // width: 90%;
    padding: 0.3rem 0.4rem;
    border-bottom: 0.01rem solid #eee;
    margin: auto;
    > div {
      width: 1.2rem;
      div {
        border-radius: 50%;
        background-color: #ff2d0f;
        position: relative;
        width: 80%;
        margin: auto;
        > i {
          position: absolute;
          top: 0.36rem;
          left: 0.35rem;
          font-size: 0.24rem;
          font-weight: 900;
          color: #ff2d0f;
          font-style: normal;
        }
      }
      p {
        font-size: 0.24rem;
        line-height: 0.6rem;
        color: #333;
      }
    }
  }
}
</style>